<template>
    <van-nav-bar title="抽奖" left-arrow @click-left="onClickLeft" :fixed="true" />
    <div class="vannavbar"></div>
    <div class="luckdraw">
        <div class="luckdraw_root">
            <div class="root">
                <LuckyWheel ref="myLucky" width="320px" height="320px" :prizes="prizes" :blocks="blocks"
                    :buttons="buttons" @start="startCallback" @end="endCallback" style="margin: 0 auto;" />
            </div>
            <div class="draw">
                <div class="int">
                    <label> 剩余抽奖次数： </label>
                    <div class="size"> <span> {{token.DrawnCounts || 0}} </span> 次 </div>
                </div>
                <div class="int">
                    <label> 抽奖总收益： </label>
                    <div class="size"> <span> {{MemberExt.RewardAmounts||0}} </span> 元 </div>
                </div>
            </div>
        </div>
        <van-overlay :show="show" @click="show = false">
            <div class="luckdraw_result" @click.stop>
                <img src="@/assets/img/luckdraw/jg.png" alt="">
                <div class="luckdraw_boss">
                    <h5> 恭喜你获得{{luckdrawValue}} </h5>
                    <div class="btn" @click="show = false"> 确定 </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
    //Lottery  抽奖的 那个 配置项
    import { onMounted, reactive, ref, toRefs } from 'vue'
    import { Toast, Notify } from 'vant';
    import { Dialog } from 'vant';
    import { useStore } from "vuex"; // ⚪️ 引入状态管理
    import { useRoute, useRouter } from "vue-router";
    import router from "@/router";
    import { LotteryReq, itemsMultiple, GetMemberExt } from "@/network/user";
    import PicUrl from '@/assets/img/luckdraw/center.png'
    export default {
        setup() {
            const store = useStore(); // 获取对象
            let myLucky = ref(null); //本质是reactive({value:null})
            const state = reactive({
                token: store.state.user.token,
                MemberExt: { PropertyAmounts: 0 },
                luckdrawValue: 0,
                show: false,
                LotteryList: [],
                backgroundList: ['#FEC785', '#FFB96D', '#FEC785', '#FFB96D', '#FEC785', '#FFB96D'],
                blocks: [{ padding: '13px', background: '#FEEDC3' }],
                prizes: [],
                buttons: [{
                    radius: '35%',
                    imgs: [{
                        src: PicUrl,
                        width: '100%',
                        top: '-130%'
                    }],
                }],
            });
            // 点击抽奖按钮会触发star回调
            function startCallback() {
                if (state.token.DrawnCounts > 0) {
                    var max = state.LotteryList.length
                    // 调用抽奖组件的play方法开始游戏
                    myLucky.value.play()
                    // 模拟调用接口异步抽奖
                    setTimeout(() => {
                        // 假设后端返回的中奖索引是0
                        const index = parseInt(Math.random() * max)
                        // 调用stop停止旋转并传递中奖索引
                        myLucky.value.stop(index)
                    }, 3000)
                } else {
                    Dialog.alert({
                        title: '提示',
                        message: '抽奖次数已用完,下单即可获得抽奖机会哦！',
                        confirmButtonColor: '#FFB96D',
                        theme: 'round-button',
                    }).then(() => { });
                }

            };
            // 抽奖结束会触发end回调
            function endCallback(prize) {
                var LotteryItem = prize.fonts[0].Key;
                state.luckdrawValue = prize.fonts[0].text;
                var params = {
                    MemberId: state.token.ID,
                    LotteryItem: LotteryItem
                }
                LotteryReq(params).then((res) => {
                    if (res.Code == 0) {
                        state.show = true;
                        getUser();
                        GetMember();
                    } else { }
                });

            };
            onMounted(() => {
                init();
            });
            // 初始化信息
            const init = () => {
                GetMember();
                var params = {
                    catalogNames: 'Lottery'
                }
                // 获取中奖类型   字典key    Category
                itemsMultiple(params).then((res) => {
                    if (res.Code == 0) {
                        var data = res.Data.Lottery;
                        state.LotteryList = data;
                        data.forEach((element, index) => {
                            state.prizes.push(
                                {
                                    fonts: [{ text: element.Value + '元', Key: element.Key, top: '10%', fontSize: '24px', fontColor: '#fff' }], background: state.backgroundList[index]
                                }
                            )
                        });

                    } else { }
                });
            };
            //获取用户扩展信息 更新抽奖总收益
            const GetMember = () => {
                // 获取扩展信息
                GetMemberExt({
                    Id: state.token.ID
                }).then((res) => {
                    if (res.Code == 0) {
                        var data = res.Data;
                        state.MemberExt = data
                    }

                });
            }
            //获取用户信息 更新余额
            const getUser = () => {
                store.dispatch("GetMemberInfo", { Id: store.state.user.token.ID }).then((res) => {
                    state.token = res.Data
                }).catch(() => { });
            }
            const onClickLeft = () => {
                router.push({ path: "/Home" });
            };
            return {
                ...toRefs(state),
                onClickLeft,
                myLucky,
                startCallback,
                endCallback,
                GetMember,
                getUser,
            };
        },
    };
</script>

<style scoped>

</style>